<template>
	<view class="container" :style="{'background-image': 'url(' + backgroundImageUrl + ')'}">
		<view class="Qbottom">
			<navigator class="item1" :url="'/subpkg/createShop/createShop'">
				<text class="crateItem">创建账号</text>
				<image class="image" src="../../static/icon/按钮.png"></image>
			</navigator>
			<view class="item2" @click="navShouquan">
				<text class="manageItem2">关联子账号</text>
				<image class="image" src="../../static/icon/按钮 (3).png"></image>
			</view>
			<view class="item3" @click="toggle()">
				<text class="manageItem">打造爆款</text>
				<image class="image" src="../../static/icon/按钮 (1).png"></image>
			</view>
		</view>
		<view class="powerList">
			<navigator class="item" :url="'/pages/Tutorial/index?type='+1">
				<image src="../../static/icon/第二课堂icon.png"></image>
				<view class="text">使用教程</view>
			</navigator>
			<navigator class="item" :url="'/pages/Tutorial/index?type='+2">
				<image src="../../static/icon/视频 (1).png"></image>
				<view class="text">短视频案例</view>
			</navigator>
			<navigator class="item" :url="'/pages/Tutorial/index?type='+3">
				<image src="../../static/icon/直播.png"></image>
				<view class="text">直播间案例</view>
			</navigator>
			<navigator class="item" @click="AitextContent">
				<image src="../../static/icon/文案(2).png"></image>
				<view class="text">AI文案创作</view>
			</navigator>
			<navigator class="item" @click="jiaMHe">
				<image src="../../static/icon/合作.png"></image>
				<view class="text">加盟合作</view>
			</navigator>
			<view class="item" @click="openChonzhi">
				<image src="../../static/icon/chongzhi.png"></image>
				<view class="text">积分兑换</view>
			</view>
		</view>

		<view class="logoText">
			<view>打造爆款短视频，套模板就好了</view>
		</view>

		<view class="logo">
			<image v-if="agentShop.logoUrl" class="logoImg" :src="agentShop.logoUrl" mode=""></image>
			<image v-else class="logoImg" src="/static/images/logo.png" mode=""></image>
		</view>

		<view>
			<!-- 拟态框start -->
			<!-- <uni-popup ref="popup" background-color="rgb(238, 234, 249)" class="">
				<view style="height: 800rpx;border-top-left-radius: 20rpx; overflow: auto;">
					<view class="popup-header">
						<view class="title">
							我的商家（{{person.length}}家）
						</view>
						<view class="close" @click="closePupop">
							x
						</view>
					</view>
					<view class="shangjia" v-for="(item,index) in person" :key="index">
						<view class="left">
							<image :src="baseHttp+item.shopImg" style="height: 70rpx;width:70rpx;"></image>
							<view class="left-right">
								<view style="display: flex;">
									<view class="qiye">{{item.shopName}}</view>
									<view class="shouquan">
										{{item.type == 1 ? '自建':'授权'}}
									</view>
								</view>
								<view class="create-time">
									创建于{{item.createTime}}
								</view>
								<view class="classify">
									剪辑+直播
								</view>
							</view>
						</view>

						<view class="right" @click="bk(item)">
							打造爆款
						</view>
					</view>

					<view style="display: flex; justify-content: center;font-size: 30rpx;color: #666;">
						没有更多数据了
					</view>
				</view>
			</uni-popup> -->
			<!-- 拟态框end -->


			<!-- 充值模态框 start -->
			<uni-popup ref="chongzhiPopup" background-color="rgba(0,0,0,0)" type="bottom">
				<view class="radius">
					<view class="header">
						<view>积分充值</view>
						<!-- <view class="radius-close"
							@click="closeZidingyi">x</view> -->
						<image src="../../static/icon/叉.png" @click="closeChongzhi" style="width: 40rpx;height: 40rpx;">
						</image>
					</view>
					<view class="huati-box">
						<input class="huati-input" v-model="cami" placeholder="请输入卡密" />
						<image v-if="cami" src="../../static/icon/叉.png" @click="clearCami"
							style="width: 34rpx;height: 34rpx;margin: 0 10rpx;"></image>
					</view>

					<view class="huati-footer">
						<view class="cancel" @click="closeChongzhi">
							取消
						</view>
						<view class="submit" @click="submitChongzhi">
							确定
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 充值模态框 start -->

			<!-- 子账号态框 start -->
			<uni-popup ref="zizhanghaoPopup" background-color="rgba(0,0,0,0)" type="bottom">
				<view class="radius">
					<view class="header">
						<view>子账号绑定</view>

						<image src="../../static/icon/叉.png" @click="closeZizhanghao"
							style="width: 40rpx;height: 40rpx;">
						</image>
					</view>
					<view class="huati-box">
						<input class="huati-input" v-model="authoCode" placeholder="请输入授权码" />
						<image v-if="authoCode" src="../../static/icon/叉.png" @click="clearAuthcode"
							style="width: 34rpx;height: 34rpx;margin: 0 10rpx;"></image>
					</view>

					<view class="huati-footer">
						<view class="cancel" @click="closeZizhanghao">
							取消
						</view>
						<view class="submit" @click="submitAuthCode">
							提交
						</view>
					</view>

				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import Http from '../../utils/http';
	const http = new Http();
	const app = getApp()
	export default {
		data() {
			return {
				title: '首页',
				person: {},
				baseHttp: '',
				cami: "", //卡密
				agentShop: {},
				authoCode: ""
			}
		},

		mounted() {
			const app = getApp()
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
		},
		computed: {
			backgroundImageUrl() {
				return this.baseHttp + 'mojian/2024/3/14/17104010491284d08abf5cf8244f286365e8c92d4887d.png'
			}
		},
		onShow() {
			http.get('v1/system/createShop/getInfo/' + 1).then(res => {
				this.person = res.data.data[0];
				app.globalData.shopId = this.person.id;
				app.globalData.tradeId = this.person.tradeId
				app.globalData.shop = this.person;
			})
			uni.showShareMenu({
				withShareTicket: true
			})
		},
		onLoad(opions) {
			let that = this
			let info = uni.createSelectorQuery().select(".container");
			

			if (opions.patientId != undefined) {
				//二维码识别
				console.log("options==>", opions);
				http.post("v1/system/createShop/bindPatientUser", {
					patientId: opions.patientId
				}).then(res => {
					if (res.data.code != 200) {
						return uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
					}
					uni.showToast({
						title: "绑定成功"
					})
					if (res.data.data) {
						res.data.data.logoUrl = app.globalData.baseHttp + res.data.data.logoUrl
					}
					this.agentShop = res.data.data
				})
			} else {
				http.get("v1/system/createShop/getPatientUser").then(res => {
					if (res.data.data) {
						res.data.data.logoUrl = app.globalData.baseHttp + res.data.data.logoUrl
					}
					if (res.data.data != undefined) {
						this.agentShop = res.data.data
					}
				})
			}
		},
		onShareAppMessage() {
			return {
				title: '模剪，傻瓜式制作有流量的视频',
				path: '/pages/index/index',
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' // 指定分享时显示的图片链接
			}
		},
		//2.配置分享到朋友圈
			onShareTimeline(){
		    return{
		      title: '模剪，傻瓜式制作有流量的视频',                //分享的标题
		      query: '/pages/index/index',     //点击分享链接之后进入的页面路径
		      imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' //分享发送的链接图片地址
		    }
		  },
		
		methods: {
			getShopInfo(){
				http.get('v1/system/createShop/getInfo/' + 1).then(res => {
					this.person = res.data.data[0];
					app.globalData.shopId = this.person.id;
					app.globalData.shop = this.person;
				})
			},
			//店铺授权
			navShouquan() {
				//=======
				if (!this.person) {
					return uni.showModal({
						title: "请先创建店铺",
						showCancel: false
					})
				}
				if (this.person.parentId) {
					uni.showModal({
						title: "系统监测到你已绑定其他账号，需要解绑才能绑定其他子账号，是否需要解绑",
						cancelText: "不解绑",
						confirmText: "解绑",
						success: (confirm) => {
							if (confirm.confirm) {
								http.post("v1/shopAuth/unbind", {
									id: this.person.id
								}).then(res => {
									if (res.data.code != 200) {
										return uni.showToast({
											title: res.data.msg
										})
									} else {

										return uni.showToast({
											title: "解绑成功"
										})
									}
								})
							}
						}
					})
				} else {
					this.$refs.zizhanghaoPopup.open()
				}

			},
			//关闭子账号绑定弹窗
			closeZizhanghao() {
				this.$refs.zizhanghaoPopup.close()
			},
			clearAuthcode(){
				this.authoCode = ""
			},
			//提交子账号授权码
			submitAuthCode() {
				if (!this.authoCode) {
					return uni.showToast({
						title: "授权码不能为空",
						icon: "error"
					})
				}

				http.post("v1/shopAuth/bind", {
					authCode: this.authoCode
				}).then(res => {
					if (res.data.code != 200) {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "绑定成功"
						})
						this.getShopInfo()
						this.$refs.zizhanghaoPopup.close()
						this.authoCode = ""
						
					}
				})
			},
			AitextContent() {
				// uni.showToast({
				// 	title: '该功能正在开发中~',
				// 	icon: 'error'
				// })
				uni.navigateTo({
					url:'/subpkg/Aitext/Aitext'
				})
			},
			jiaMHe() {
				// uni.showToast({
				// 	title: '该功能正在开发中~',
				// 	icon: 'error'
				// })
				uni.navigateTo({
					url:'/pages/Zb/Zb'
				})
			},
			//清楚卡密
			clearCami() {
				this.cami = ""
			},
			//关闭充值弹窗
			closeChongzhi() {
				this.$refs.chongzhiPopup.close();
			},
			//提交充值
			submitChongzhi() {
				if (!this.cami) {
					return uni.showToast({
						title: "卡密不能为空",
						icon: "none"
					})
				}
				http.post("v1/system/createShop/exchageCami", {
					cami: this.cami
				}).then(res => {
					if (res.data.code != 200) {
						return uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
					}
					uni.showToast({
						title: "兑换成功"
					})
					this.cami = ""
					this.$refs.chongzhiPopup.close()
				})
			},
			bk(data) {
				app.globalData.shopId = data.id;
				app.globalData.shop = data;
				this.$refs.popup.close('bottom');
				uni.switchTab({
					url: '/pages/AiVideo/AiVideo'
				})
			},
			toggle(type) {
				if (!this.person) {
					return uni.showModal({
						title: "请先创建店铺",
						showCancel: false
					})
				}
				if (this.person.id != undefined) {
					uni.switchTab({
						url: '/pages/AiVideo/AiVideo'
					})
				} 
				
				// else {
				// 	// uni.navigateTo({
				// 	// 	url: "/subpkg/createShop/createShop"
				// 	// })
				// 	// uni.showToast({
				// 	// 	title: '您还未有店铺,请创建!',
				// 	// 	icon: 'none'
				// 	// })
				// }
			},
			closePupop() {
				this.$refs.popup.close()
			},
			//打开充值弹窗
			openChonzhi() {
				if (!this.person) {
					return uni.showModal({
						title: "请先创建店铺",
						showCancel: false
					})
				}
				this.$refs.chongzhiPopup.open();
			}
		}
	}
</script>

<style scoped lang="scss">
	// background-image: url('');
	.container {
		width: 100vw;
		display: flex;
		background-size: cover;
		flex-direction: column;
		justify-content: center;

		.Qbottom {
			margin-top: 250rpx;
			width: 95%;
			height: 100rpx;
			display: flex;
			padding: 20rpx 30rpx;
			align-items: center;
			justify-content: space-around;

			.item1 {
				height: 100rpx;
				width: 200rpx;
				position: relative;

				.crateItem {
					position: absolute;
					top: 50%;
					left: 50%;
					font-size: 25rpx;
					transform: translate(-50%, -50%);
					/* 水平垂直居中 */
				}

				.image {
					height: 100%;
					width: 100%;
				}
			}

			.item2 {
				height: 100rpx;
				width: 220rpx;
				position: relative;

				.manageItem2 {
					// font-size: 25rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					position: absolute;
					/* left: 20rpx;
					top: 20rpx; */
					transform: translate(50rpx, 0);
					line-height: 100rpx;
					font-size: 25rpx;
					// top: 50%;
					// left: 43%;
					// 
					// transform: translate(-38%, -50%);
					/* 水平垂直居中 */
				}

				.image {
					height: 100%;
					width: 100%;
				}
			}

			.item3 {
				height: 100rpx;
				width: 200rpx;
				position: relative;

				.image {
					height: 100%;
					width: 100%;
				}

				.manageItem {
					position: absolute;
					top: 50%;
					left: 50%;
					font-size: 25rpx;
					transform: translate(-50%, -50%);
					/* 水平垂直居中 */
				}
			}
		}

		.powerList {
			margin: 10rpx auto;
			height: 300rpx;
			width: 85%;
			border-radius: 40rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				flex: 0 0 calc(33.33% - 40rpx);
				margin: 20rpx;
				/* 设置元素之间的间距 */
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				image {
					width: 80rpx;
					height: 70rpx;
				}

				.text {
					font-size: 25rpx;
					color: white;
				}
			}
		}

		.logoText {
			height: 100rpx;
			width: 100vw;
			padding: 10rpx 0rpx;
			margin: 20rpx 0rpx 75rpx 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				font-size: 35rpx;
				color: rgb(205, 154, 189);
			}
		}

		.logo {
			height: 200rpx;
			width: 100vw;
			margin-bottom: 490rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.logoImg {
				margin-top: 30rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}

		.popup-content {
			width: 100vw;

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.PersonInfo {
					display: flex;

					image {
						height: 100rpx;
						width: 100rpx;
						margin: 10rpx;
					}
				}
			}
		}
	}

	.popup-header {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.shangjia {
		margin: 10rpx 30rpx 30rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.left-right {
				margin-left: 20rpx;

				.qiye {
					font-size: 34rpx;
					font-weight: bold;
				}

				.shouquan {
					font-size: 24rpx;
					color: aquamarine;
					border: 1rpx solid aquamarine;
					height: 30rpx;
					line-height: 30rpx;
					width: 70rpx;
					margin-left: 10rpx;
					text-align: center;
					border-radius: 6rpx;
				}

				.create-time {
					font-size: 24rpx;
					color: #666;
				}

				.classify {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.right {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #00008B;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			border-radius: 12rpx;
		}
	}

	.close {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #807e81;
		color: #fff;
		border-radius: 25rpx;
	}

	//自定义话题
	.radius {
		height: 400rpx;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		border: 1rpx solid #fff;
		position: relative;


		.header {
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin: 0 30rpx;
		}

		.huati-box {
			display: flex;
			// padding: 10rpx 30rpx 20rpx 30rpx;
			width: 90%;
			margin-left: 30rpx;
			margin-top: 50rpx;
			align-items: center;
			background: #f1f1f1;
			justify-content: space-between;
			border: 1rpx solid #eee;

			.huati-input {
				flex: 1;
				font-size: 32rpx;
				padding-left: 14rpx;
				color: #666;
				height: 70rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				text-indent: 20rpx;

			}
		}



		.huati-footer {
			display: flex;
			margin: 50rpx 30rpx 20rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bold;

			.cancel {
				width: 42%;
				height: 80rpx;
				background: #eee;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
			}

			.submit {
				width: 42%;
				height: 80rpx;
				background: #00008B;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				text-align: center;
			}
		}
	}
</style>